<!DOCTYPE html>
<html>

    <head>
        <title>富文本编辑器</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <div class="edit-wrap">
            <div id="editor" contenteditable="true" class="edit-textarea"
                style="height: 300px;width:500px;margin:20px auto;border:1px solid #ddd ;padding-left: 100px;" onblur="console.log(this.value);
                " onpaste="ImgCopy($event)"></div>
            <img id="myimg" src="" />



            <script>
                document.querySelector('#editor').addEventListener('paste', function (even, value) {
                    console.log(even.clipboardData.files)

                    let file = even.clipboardData.files[0]

                    let fileReader = new FileReader();  // 文件解读器


                    fileReader.onloadend = function () {
                        console.log(fileReader.result);
                        // document.querySelector('#myimg').src = fileReader.result // 将读取后的base64
                    }

                    fileReader.onerror = function (err) {
                        console.log(err)
                    }

                    fileReader.readAsDataURL(file) // 读取一个文件返回base64地址

                })
                function ImgCopy(even, value) {
                    console.log(even.clipboardData.files)

                    let file = even.clipboardData.files[0]

                    let fileReader = new FileReader();  // 文件解读器


                    fileReader.onloadend = function () {
                        console.log(fileReader.result);
                        // document.querySelector('#myimg').src = fileReader.result // 将读取后的base64
                    }

                    fileReader.onerror = function (err) {
                        console.log(err)
                    }

                    fileReader.readAsDataURL(file) // 读取一个文件返回base64地址

                }
            </script>
    </body>

</html>